<template>
    <h1>年份 --- {{ year }}</h1>
    <button @click="year++">修改年份</button>

    <h1>{{ msg1 }} --- {{ msg2 }}</h1>
</template>

<script>
export default {
    data() {
        return {
            year: 2005,

            msg1: '',
            msg2: ''
        };
    },
    // 内部专门存储 侦听器
    watch: {
        // xxx 其实就是你要侦听的数据, 可以是 data 中的数据, 也可以是一个计算属性
        // xxx () {}

        year () {
            console.log('页面首次执行的时候, 我不会执行, 但是 year 这个变量被修改后我会立即执行')


            document.body.style.backgroundColor = 'red'

            this.msg1 = 'msg1 展示'
            this.msg2 = 'msg2 展示'
        }
    }
};
</script>

<style></style>
